<template>
  <view
    :style="{
      height: props.height ? props.height : '50px',
      width: props.width ? props.width : '50px',
      lineHeight: props.lineHeight ? props.lineHeight : '50px',
      fontSize: props.fontSize ? props.fontSize : '16px',
      marginRight: props.marginRight ? props.marginRight : '0px'
    }"
    :class="['user-wrap', 'user-wrap-bg_' + renderAvatar.randomBg]"
  >
    {{ renderAvatar.name }}
  </view>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'

type Props = {
  userName: string
  width?: string
  height?: string
  lineHeight?: string
  fontSize?: string
  title?: string
  marginRight?: string
}

type AvatarType = {
  name: string
  randomBg?: string
}

const renderAvatar = reactive<AvatarType>({
  name: '',
  randomBg: ''
})

const props = defineProps<Props>()

const renderUserByName = (userName: string) => {
  const name =
    userName.length > 2 ? userName.substring(1, 3) : userName.substring(0, 2)
  const randomBg = ['blue', 'green', 'red', 'orange', 'asset', 'purple'].at(
    name.charCodeAt(1) % 6
  )
  renderAvatar.name = name
  renderAvatar.randomBg = randomBg
}

onMounted(() => {
  renderUserByName(props.userName)
})
</script>

<style scoped>
.user-wrap {
  border-radius: 5px;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  display: inline-block;
}

.user-wrap-bg_blue {
  background: linear-gradient(135deg, #0062ff 0%, #0094ff 100%);
}

.user-wrap-bg_green {
  background: linear-gradient(135deg, #00a76d 0%, #00d26e 100%);
}

.user-wrap-bg_red {
  background: linear-gradient(135deg, #e73938 0%, #f00 100%);
}

.user-wrap-bg_orange {
  background: linear-gradient(135deg, #f55600 0%, #ff6700 100%);
}

.user-wrap-bg_asset {
  background: linear-gradient(135deg, #366ef4 0%, #7b7bff 100%);
}

.user-wrap-bg_purple {
  background: linear-gradient(135deg, #4100b5 0%, #a16cff 100%);
}
</style>
